<html>
    <head>
        <title>
            Flexbox 响应式布局
        </title>
    </head>
    <body>
        <script>
            /*
                三、Flexbox
                
                            1、Flex容器

                                    flex 是 Flexbox的缩写，意思为 "弹性布局"，用来为盒模型提供最大的灵活性。

                                    nvue布局模型基于 CSS Flexbox，以便所有页面元素的排能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。

                                    Flexbox 包含 flex 容器和 flex 成员项。

                                    如果一个 nvue元素可以容纳其他元素，那么它就成为flex容器。

                                    （文档中未说明的 flexbox 属性均不支持：如 order、flex-grow 、flex-shrink 、 flex-basis、align-content、align-self 等）


                                  ★、 在 nvue 中 ，Flexbox是默认且唯一的布局模型，所以你不需要手动为元素添加 display:flex 属性。


                            2、flex-direction

                                    定义了 flex 容器中flex成员的排列方向，默认值为 column

                                         可选值                       描述

                                         column                      竖排，从上到下

                                         column-reverse              反向竖排，排布方向与 flex-direction:column 相反

                                         row                         横排，从左到右

                                         row-reverse                 方向横排，排布方向与 flex-direction:row 相反


                            3、flex-wrap

                                    决定了flex成员项在一行还是多行分布，默认值为 nowrap

                                         可选值                      描述

                                         nowrap                     不换行，flex成员项在一行排布，排布的开始位置由direction指定

                                         wrap                       换行，第一行在上方，flex成员项在多行排布，排布的开始位置由direction指定

                                         wrap-reverse               换行，第一行在下方，行为类似于 wrap，排布方向与其相反。

                            4、justify-content

                                     定义了flex容器中flex成员项在主轴方如何排列一处理空白部分。默认值为flex-start.

                                         可选值                       描述

                                         flex-start                   左对齐，所有的flex成员项都排列子容器的前部

                                         flex-end                     右对齐，则意味着成员项排列在容器的后部

                                         center                       居中，即中间对齐，成员项排列在容器中间、两百年留白

                                         space-between                两端对齐，空白均匀地填充的flex成员项之间

                                         space-around                 表示flex成员项两侧的间隔相等，所以，成员项之间的间隔比成选项与边框的间隔大一倍。


                                         图片：  https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/justify-content.png


                            5、align-items
                                    
                                     定义了 flex 容器中flex成员项在纵轴方向撒花姑娘如何排列以处理空白部分。默认值为 stretch.

                                          可选值                         描述

                                          stretch                       即拉伸高度至 flex 容器的大小

                                          flex-start                    上对齐，所有的成员项排列在容器顶部

                                          flex-end                      下对齐，所有的成员项排列在容器底部

                                          center                        中间对齐，所有成员项都垂直地居中显示

                                          图片：   https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/align-items.png


                            6、flex
                                    
                                     flex属性定义了flex成员项可占用容器中剩余空间的大小。 flex：值为 number 类型。

                                         ①、如果所有的成员项设置相同的值 flex：1，它们将平均分配剩余空间。

                                         ②、经常中左自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区域flex：1，内容区则会自动放大占满剩余空间

                                         ③、如果一个成员项设置的值为 flex:2 ,其他的成员项设置的值为 flex:1,那么这个成员项所占用的剩余空间时其他成员项的2倍。
            
            
                                    ★、Flex成员项暂不支持 flex-shrink、flex-basis、align-content 属性

                                        该属性不支持 flex: flex-grow | flex-shrink | flex-basis 的简写。
            */
        </script>
    </body>
</html>